<template>
  <div>
    <NavBar/>
    <div class="myLive dashboard-head">
      <div>
        <div class="head item">
          <div class="container">
            <div class="photo photo-level">
              <img :src="me.sysUser.avatar">
              <span :class="[`level`,`level_${me.sysUser.authType}`]"></span>
            </div>
            <div v-if="me.sysUser.authType==='0'||!me.sysUser.authType" class="name">
              <h1 class="ftz24">{{me.sysUser.userAccount}}</h1>
            </div>
            <div v-if="me.sysUser.authType === '1'||me.sysUser.authType === '2'||me.sysUser.authType === '3'" class="name">
              <div>
                <span class="ftz24">{{me.sysUser.authName}}</span>
                <i>我的主页</i>
              </div>
              <div>
                <span>关注 {{me.focusNum}}</span>
                <span>｜</span>
                <span>粉丝 {{me.fansNum}}</span>
              </div>
            </div>
            <div class="fr info">
             <ul>
                <li>
                  <span class="ftz16">{{me.viewpointNum}}篇</span>
                  <p>观点</p>
                </li>
                <li>
                  <span class="ftz16">{{me.planNum}}篇</span>
                  <p>计划</p>
                </li>
                <li>
                  <span class="ftz16">{{me.answerNum}}次</span>
                  <p>回答</p>
                </li>
                <li>
                  <span class="ftz16">{{me.subscriptionNum}}次</span>
                  <p>订阅量</p>
                </li>
                <li>
                  <span class="ftz16">{{me.incomeAll}}中亿币</span>
                  <p>收益</p>
                  <!-- userId:{{me.sysUser.userId}} -->
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="container-user">
          <div class="con w82 item fr">
            <div class="item-h">
              <h4 class="ftz16">
                <span class="title">主题列表</span>
                <span class="tip" v-if="liveInfo.expireTime">直播服务到期时间（{{liveInfo.createTime | parseTime('{y}-{m}-{d}')}}——{{liveInfo.expireTime | parseTime('{y}-{m}-{d}')}}）</span>
                </h4>
              <a href="javascript:void(0)" @click="$router.push('/liveRoom')" class="fr">+开始直播</a>
            </div>
            <div class="live-c">
              <div class="live-tab">
                <table>
                  <tr>
                    <th>直播日期</th>
                    <th>主题</th>
                    <th>直播人气</th>
                    <th>查看详情</th>
                  </tr>
                  <tr v-for="(item, index) in viewData" :key="index">
                    <td>{{item.createTime | parseTime('{m}-{d} {h}:{i}')}}</td>
                    <td>{{item.topicName}}</td>
                    <td>{{item.number}}</td>
                    <td>
                      <a href="javascript: void(0)" @click="$router.push(`/liveRoom?roomId=${item.roomId}`)">点击进入</a>
                    </td>
                  </tr>
                </table>
              </div>
              <button v-if="total > viewData.length" class="load-more ftz16" @click="loadMore">
                <template v-if="loading">
                  <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
                  <span>正在加载，请稍候......</span>
                </template>
                <span v-else>点击加载更多...</span>
              </button>
              <button class="load-more ftz16" v-if="total===viewData.length">数据已经全部加载</button>
            </div>
          </div>
          <div class="w15 item fl">
            <SideBar2/>
          </div>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script>
// import $ from 'jquery'
import NavBar from '@/components/nav-bar'
import SideBar2 from '@/components/side-bar2'
import Footer from '@/components/footer'
import Laypage from '@/components/laypage'
// import { mapState } from 'vuex'
// import CryptoJS from 'crypto-js'
import * as api from '@/service/api'
// import cookie from '@/utils/cookie'
export default {
  components: {
    NavBar,
    Footer,
    SideBar2,
    Laypage
  },
  data () {
    return {
      viewData: [],
      liveInfo: {},
      total: null,
      searchData: {
        pageNum: 1,
        pageSize: 10
      },
      loading: false
    }
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    },
    me () {
      return this.$store.state.me
    }
  },
  created () {
    this.getMyLive()
    this.getLiveInfo()
  },
  methods: {
    loadMore () {
      this.searchData.pageNum = this.searchData.pageNum + 1
      this.getMyLive()
    },
    async getLiveInfo () {
      let res = await api.getLiveInfo()
      this.liveInfo = res.data.webcastRoom
    },
    async getMyLive () {
      this.loading = true
      let res = await api.getMyLive({ ...this.searchData })
      if (this.searchData.pageNum === 1) {
        this.viewData = res.data.list
      } else {
        this.viewData = this.viewData.concat(res.data.list)
      }
      this.total = res.data.total
      this.loading = false
    }
  }
}
</script>
<style lang="scss">
@import "../../style/res/live";
@import "../../style/res/user";
</style>
